<script setup>
defineOptions({ name:'IndexItem' })
import { getCommoditySerivce } from '@/api/checkout';
import { onMounted ,ref} from 'vue'
import { submitPayService } from '@/api/checkout';
import { useRouter } from 'vue-router';
import { useCartStore } from '@/stores/car';
const cartStore = useCartStore()
const router = useRouter()
// 调接口
const checkInfo = ref({})
const isdefult = ref({})
const getCommodity = async() => {
const res = await getCommoditySerivce()
checkInfo.value = res.data.result
console.log(checkInfo.value);
const item = res.data.result.userAddresses.filter(item => item.isDefault === 0)
isdefult.value = item[0]
}
onMounted(()=>{
  getCommodity()
})

// 打开弹窗
const dialogVisible = ref(false)
const onAddchange = () => {
dialogVisible.value = true
}

// 点击激活弹窗中的列表
const itemIndex = ref()
const itemAddress = ref({})
const current = (item) => {
  itemIndex.value = item.id
  itemAddress.value = item
}

// 点击弹窗确定按钮切换地址信息
const confirm = () => {
  dialogVisible.value = false
  isdefult.value.receiver = itemAddress.value.receiver
  isdefult.value.contact = itemAddress.value.contact
  isdefult.value.fullLocation = itemAddress.value.fullLocation
}

// 提交订单逻辑
const submitPay = async() => {
  const res = await submitPayService({
      deliveryTimeType:1,
      payType:1,
      payChannel:1,
      buyerMessage:'',
      goods: checkInfo.value.goods.map(item => { return { skuId:item.skuId, count:item.count} }),
      addressId: isdefult.value.id
    })
    router.push({
        path : '/pay',
        query:{
          id: res.data.result.id
        }
    })
    cartStore.clearCart()
    cartStore.words = res.data.result.id
    cartStore.money = checkInfo.value.summary.totalPayPrice
}

</script>
<template>
   <!-- 收货地址 -->
  <div class="address w">
    <el-card style="width: 1200px; height: 30vh">
      <template #header>收获地址</template>
      <div class="left">
        <span>收获人：<strong>{{ isdefult.receiver }}</strong></span>
        <span>联系方式：<strong>{{ isdefult.contact }}</strong></span>
        <span>收获地址：<strong>{{ isdefult.fullLocation }}</strong></span>
      </div>
      <div class="right">
        <el-button type="primary" plain @click="onAddchange">切换地址</el-button>
        <el-button type="primary" plain>添加地址</el-button>
      </div>
    </el-card>
  </div>

 <!--商品信息部分 -->
  <div class="info w" style="margin-top: 20px">
    <el-card style="width: 1200px">
      <template #header>商品信息</template>
      <table class="spInfo">
        <thead>
          <tr style="background-color: #eee; line-height: 60px;">
            <th>商品信息</th>
            <th>单价</th>
            <th>数量</th>
            <th>小计</th>
            <th>实付</th>
          </tr>
          <!--  -->
          <tr class="tr"  v-for="item in checkInfo.goods" :key="item.id">
            <td style="display: flex; align-items: center; text-align: left" class="num1">
              <img :src="item.picture" alt="" width="200px" height="200px">&nbsp;&nbsp;&nbsp; 
              <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ item.name }}</p>
            </td>
            <td> {{ item.price }}</td>
            <td> {{ item.count }}个</td>
            <td> {{ item.totalPayPrice }}元 </td>
            <td> {{ item.totalPrice }}元 </td>
          </tr>
        </thead>
      </table>
    </el-card>
  </div>


<div class="time w" style="margin-top: 20px;">
  <el-card style="max-width: 1200px">
    <!-- 配送时间 -->
    <template #header>配送时间</template>
    <div class="time-btn" style="width: 100%;">
        <a href="#" class="num-time1 active">周一至周五</a>
        <a href="#" class="num-time1 active">周一至周五</a>
        <a href="#" class="num-time1 active">周一至周五</a>
    </div>
    <!-- 支付方式 -->
    <div class="page" style="margin-top: 30px;">
       <h3 style="font-weight: 400;font-size: 14px;border-bottom: 1px solid #ccc; padding-bottom: 15px">支付方式</h3>
       <div class="page-a" style="margin-top: 30px;">
           <a href="#" class="num-time1 active">在线支付</a>
           <a href="#" class="num-time1 active">微信支付</a>
           <a href="#" class="num-time1 active">支付宝支付</a>
       </div>
    </div>

    <!-- 金额明细 -->
     <div class="mingxi" style="margin-top: 30px; overflow: hidden" v-if="checkInfo.summary">
        <h3 style="font-weight: 400;font-size: 14px;border-bottom: 1px solid #ccc; padding-bottom: 15px">金额明细</h3>
        <div class="big" style="float: right; padding-right: 100px;" >
           <div class="count" style="margin: 10px 0;">
                 <span style="margin-right: 20px;">商品件数：</span> <span>{{checkInfo.summary.goodsCount}}件</span>
           </div>
           <div class="count" style="margin: 10px 0;">
                 <span style="margin-right: 20px;">商品总价：</span> <span>{{checkInfo.summary.totalPrice}}元</span>
           </div>
           <div class="count" style="margin: 10px 0;">
                 <span style="margin-right: 20px;">运&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;费：</span> 
                 <span>{{ checkInfo.summary.postFee }}元</span>
           </div>
           <div class="count" style="margin: 10px 0;">
                 <span style="margin-right: 20px; ">应付总额：</span>
                <span style="font-size: 18px; color: red;">￥ {{ checkInfo.summary.totalPayPrice }} 元</span>
           </div>
        </div>
     </div>

     <!-- 下单结算 -->
      <div class="jiesuan" style="border-top: 1px solid #ccc;">
         <el-button type="success" @click="submitPay">下单结算</el-button>
      </div>
  </el-card>
</div>

<!-- 弹窗组件 -->

  <el-dialog v-model="dialogVisible" title="切换地址" width="500">
    <div>
      <ul>
        <li class="onadd-li" @click="current(item)" :class="{active: itemIndex === item.id}" 
        v-for="item in checkInfo.userAddresses" :key="item.id">
          <a href="#" class="onadd">
             <span>收货人：{{ item.receiver }}</span>
             <span>联系方式：{{ item.contact }}</span>
             <span>收获地址：{{ item.fullLocation }}</span>
          </a>
       </li>
      </ul>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirm"> 确认 </el-button>
      </div>
    </template> 
  </el-dialog>
</template>
<style scoped>
.w {
  margin: 0 auto;
  width: 1200px;
}
.left {
  display: flex;
  flex-direction: column;
  float: left;
}
.left span {
  margin-top: 10px;
}
.right {
  margin-top: 30px;
  float: right;
}
.spInfo{
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}

.spInfo td{
  text-align: center;
  width: 240px;
}
.spInfo tr{
  border-bottom: 1px solid #ccc;
}
.spInfo td:nth-child(1){
  width: 400px
}
.time-btn{
  display: flex;
}
a[class^='num-time']{
   border: 1px solid #000;
   padding: 0 20px;
   margin: 0 30px;
}
.time-btn a:active,
.time-btn a:focus{
  border: 1px solid #27bb9a;
  color: #27bb9a;
}
.jiesuan{
  display: flex;
  justify-content: end;
  padding-top: 30px
}

.onadd-li{
  border: 1px solid #ccc; 
  margin: 10px 0;
 }
 .active{
  border: 1px solid #27ba9b;
  background-color: #ecf5ff
 }
.onadd{
  display: flex;
  flex-direction: column;
  align-items: center;
}


</style>
